<template>
<div :class="[$style.container]" v-loading="loading">
  <div :class="[$style.body]" v-if="loaded">
    <expired-page v-if="hasExpired"></expired-page>
    <access-page :data="data" v-else-if="needAccessCheck"></access-page>
    <doc-list :data="data" :doc-parent-id="docParentId" :access-code="accessCode" v-else></doc-list>
  </div>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import AccessPage from './components/access-page/index.vue'
import ExpiredPage from './components/expired-page/index.vue'
import DocList from './components/doc-list/index.vue'
import { getDocLink } from '@/api/doc-share'

@Component({
  components: { AccessPage, ExpiredPage, DocList }
})
export default class Share extends Vue {
  @Prop() id!: string

  @Prop() accessCode!: string

  @Prop() docParentId!: string

  data: any = null

  loading = false

  loaded = false

  get hasExpired () {
    return !this.data || this.data?.hasExpired || !this.data?.doc
  }

  get needAccessCheck () {
    return !this.data?.hasAccessed
  }

  loadData () {
    this.loading = true
    getDocLink(Number(this.id), this.accessCode).then(data => {
      this.data = data || null
    }).finally(() => {
      this.loading = false
      this.loaded = true
    })
  }

  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  min-height: 100vh;
}
</style>
